<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // ES6 允许使用“箭头”（=>）定义函数
    // 如: var f = v => v;

    // 等价于
    // var f = function (v) {
    //     return v;
    // };


    // 如何把普通函数改为箭头函数?
    // (1) 箭头函数都是匿名函数, 先将普通函数改为匿名函数
    // (2) 省略函数的关键词function,再()后加 "=>"
    // (3) 如果函数的形参只有一个, 小括号可以省略
    //     a. 如果函数没有形参,或者形参超过一个,小括号不能省略
    //     b. 如果函数只有一个形参,但是设置了默认值或函数的参数解构,小括号也不能省略
    // (4) 如果函数的执行语句只有一条,且是return语句, 可以省略{}和return 
    //     4.1 如果函数的返回值是一个对象, 建议用()包裹

    // 普通函数
    function sum(a,b){
        return a + b;
    }

    function double(v){
        return v * 2;
    }

    // (1) 普通函数改匿名函数
    var sum = function(a,b){
        return a + b;
    }

    var double = function(v){
        return v * 2;
    }

    // (2) 匿名函数改箭头函数  
    var sum = (a,b) => {
        return a + b;
    }

    var double = (v) => {
        return v * 2;
    }

    // (3) 简写小括号 => 有前提
    var sum = (a,b) => { // 不能简写  => 形参超过一个
        return a + b;
    }

    var double = (v = 0) => { // 不能简写 => 虽然之后一个形参,但是参数设置了默认值
        return v * 2;
    }

    // 形参只有一个 => 可以简写
    var double =  v => {
        return v * 2;
    }

    // (4) 省略{}和return 

    var sum = (a,b) => { 
        return a + b;
    }
    // 简写
    var sum = (a,b) => a + b;


    var double =  v => {
        return v * 2;
    }
    // 简写
    var double =  v => v * 2;

    // 4.1 如果函数的返回值是一个对象, 建议用()包裹
    var fn = v => {
        return {num:v};
    }
    // 简写
    var fn = v => ({num:v});

    console.log(fn(10));


    // 调用箭头函数
    // var result = sum(10,20);
    // console.log(result);

    // var result = double(10);
    // console.log(result);

    
    









</script>
</html>